class CustomTag extends HTMLElement {
    constructor() {
        //调用super 来建立正确的原型链继承关系
        super();
        const p = this.h('p');
        p.innerText = '自定义标签 Web Component';
        p.setAttribute('style', 'height:200px;width:200px;border:1px solid #ccc;background:yellow');
        //表示 shadow DOM 子树的根节点。
        const shaDow = this.attachShadow({ mode: 'open' });

        shaDow.appendChild(p);
    }

    h(el: any) {
        return document.createElement(el);
    }

    /**
     * 生命周期
     */
    //当自定义元素第一次被连接到文档 DOM 时被调用。
    connectedCallback() {
        console.log('插入');
    }

    //当自定义元素与文档 DOM 断开连接时被调用。
    disconnectedCallback() {
        console.log('断开');
    }

    //当自定义元素被移动到新文档时被调用
    adoptedCallback() {
        console.log('移动');
    }
    //当自定义元素的一个属性被增加、移除或更改时被调用
    attributeChangedCallback() {
        console.log('改变');
    }
}

window.customElements.define('web-component', CustomTag);